<template>
	<view class="container">
		<view class="header">
			<view class="navbar-box">
				<u-navbar title="首页" leftIcon=' ' placeholder='true'  ></u-navbar>
			</view>
			<view class="swiper-box">
				<u-swiper @click="onbanner" :list="list1" @change="change" ></u-swiper>
			</view>

		</view>
		<view class="title"><text class="text">为您推荐</text></view>
		<goods></goods>
		<view class="title"><text class="text">情感</text></view>
		<news></news>
		<view class="title"><text class="text">晒幸福</text></view>
		<happiness></happiness>
		<!-- activeColor="#F83885" -->
		
		<u-tabbar activeColor="#FF8E53" :value="value1" @change="change1" :fixed="true" :placeholder="true"
			:safeAreaInsetBottom="true">
			<u-tabbar-item text="首页" icon="home" @click="click1"></u-tabbar-item>
			<u-tabbar-item text="搜索" icon="list-dot" @click="click1"></u-tabbar-item>
			<u-tabbar-item text="消息" icon="chat" @click="click1"></u-tabbar-item>
			<u-tabbar-item text="我的" icon="account" @click="click1"></u-tabbar-item>
		</u-tabbar>
	</view>
</template>
<script>
	import goods from '@/components/goods/index.vue'
	import news from '@/components/news/index.vue'
	import happiness from '@/components/happiness/index.vue'
	
	import {
		mapGetters
	} from 'vuex';
	export default {
		components: {
			goods,
			news,
			happiness
		},
		computed: {
			...mapGetters(['imgBaseUrl'])
		},
		data() {
			return {
				value1:0,
				url: 'https://peonyoss.longchimudan.com', //阿里oss地址
				list1: [
					"https://images.jiayuan.com/w4/global/cms/uploadfile/2023/0413/20230413113129237.jpg",
					"https://images.jiayuan.com/w4/global/cms/uploadfile/2023/0112/20230112035106558.jpg",
					"https://cdn.uviewui.com/uview/album/1.jpg",
				],
			};
		},
		created() {
			console.log(this.imgBaseUrl, 'sssssssssssssssssssssssss')
		},

		methods: {
			click1(e) {
				this.value1 = e
				console.log('click1', e);
				if (e == 1) {
					uni.redirectTo({
						url: '/pages/goods-list/index'
					})
				}else if(e == 2){
					uni.redirectTo({
						url: '/pages/message-list/index'
					})
				}else if(e == 0){
					uni.redirectTo({
						url: '/pages/index/index'
					})
				}else if(e == 3){
					uni.redirectTo({
						url: '/pages/user/index'
					})
				}
			},
			change1() {},
			change(e) {
				console.log(e, '更换轮播图');
			},
			//点击banner
			onbanner(index) {
				console.log(index, '点击了第几章');
			},
			onGood(item) {
				console.log(item, '点击了商品');
			}
		}
	};
</script>

<style lang="scss">
	@import '@/styles/mixin.scss';

	.container {
		min-height: 100%;
		background-color: #f5f5f5;

		.header {
			.navbar-box {}

			.swiper-box {}
		}

		.title {
			margin: 20rpx;
			font-weight: bold;
			text-align: center;

			.text {
				font-size: 30rpx;
			}
		}
	}
</style>